<template>
    <div>
        <el-form-item label="渐变方向">
            <el-select v-model="data.options.direction">
                <el-option value="left" label="向左"/>
                <el-option value="right" label="向右"/>
                <el-option value="top" label="向上"/>
                <el-option value="bottom" label="向下"/>
            </el-select>
        </el-form-item>
        <el-form-item label="颜色1">
            <el-color-picker
                v-model="data.options.color1"
            />
        </el-form-item>
        <el-form-item label="颜色2">
            <el-color-picker
                v-model="data.options.color2"
            />
        </el-form-item>
        <!-- <el-form-item label="默认值">
            <el-select filterable allow-create v-model="data.options.titleDefaultValue" @change="changeTitleValue">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="标题">
            <el-select filterable v-model="data.options.defaultValue" @change="changeValue">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item> -->
        <el-form-item label="标题字体大小">
            <el-input style="width: 180px;" v-model="data.options.titleFontSize"/>
        </el-form-item>
        <el-form-item label="头像地址">
            <el-select filterable allow-create v-model="data.options.avatarDefaultValue" @change="changeAvatarValue($event, 'avatarDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="进度数">
            <el-select filterable allow-create v-model="data.options.progressNum" @change="changeAvatarValue($event, 'progressNum')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="title默认值">
            <el-select filterable allow-create v-model="data.options.titleDefaultValue" @change="changeTransValue($event, 'titleDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="进度标题默认值">
            <el-select filterable allow-create v-model="data.options.progressTitleDefaultValue" @change="changeTransValue($event, 'progressTitleDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="姓名默认值">
            <el-select filterable allow-create v-model="data.options.nameDefaultValue" @change="changeTransValue($event, 'nameDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="标题描述默认值">
            <el-select filterable allow-create v-model="data.options.titleDescDefaultValue" @change="changeTransValue($event, 'titleDescDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="描述默认值">
            <el-select filterable allow-create v-model="data.options.descDefaultValue" @change="changeTransValue($event, 'descDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name: 'ProgressCard',
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        }
    },
    methods: {
        changeValue(e) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            this.data.options.defaultValue = obj.code
            this.data.options.defaultValueCName = obj.name
        },
        changeTransValue(e, key) {
            console.log(key)
            console.log(e)
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            if (obj) {
                this.data.options[key] = obj.code
                this.data.options[key + 'CName'] = obj.name
            } else {
                this.data.options[key + 'CName'] = this.data.options[key]
            }
        },
        changeAvatarValue(e, key) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            if (obj) {
                this.data.options[key] = obj.code
            } else {
                this.data.options[key] = e
            }
        }
    }
}
</script>
